<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./css/navfoot.css">
<link rel="stylesheet" href="./css/details.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
<script src="https://fastly.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>

<body>
    <!-- 顶部 -->
    <header>
        <div class="banxin">
            <ul>
                <li><a href="#">登录注册</a></li>
                <li><a href="#">登录注册</a></li>
                <li><a href="#">登录注册</a></li>
                <li><a href="#">登录注册</a></li>
                <li><a href="#">登录注册</a></li>
                <li><a href="#">登录注册</a></li>
                <li><a href="#">登录注册</a></li>
            </ul>
        </div>
    </header>
    <!-- 搜索 -->
    <div class="seek">
        <div class="banxin">
            <div class="seekleft">
                <div></div>
                <div>
                    <form action="">
                        <input type="text" placeholder="三同好物">
                    </form>

                    <a href="#">搜索</a>

                </div>

                <div><a href="#none"  class="shoppingA">购物车</a>
                </div>




            </div>


            <div class="seekzhong">
                <div>
                    <a href="#">蓝牙耳机</a>
                    <a href="#">床</a>
                    <a href="#">茶</a>
                    <a href="#">牙膏</a>
                    <a href="#">iphon13</a>
                    <a href="#">锅</a>
                    <a href="#">中秋节</a>
                    <a href="#">行李箱</a>
                </div>
            </div>

        </div>
    </div>
    <!-- 导航 -->

    <nav>
        <ul class="banxin">
            <li><a href="#">首页</a></li>
            <li class="nav2"><a href="#" id="jujia">居家生活</a><span class="nav2span"></span></li>
            <li class="nav2"><a href="#">服饰鞋包</a><span class="nav2span"></span></li>
            <li class="nav2"><a href="#">美食酒水</a><span class="nav2span"></span></li>
            <li class="nav2"><a href="#">个护清洁</a><span class="nav2span"></span></li>
            <li class="nav2"><a href="#">母婴亲子</a><span class="nav2span"></span></li>
            <li class="nav2"><a href="#">运动旅行</a><span class="nav2span"></span></li>
            <li class="nav2"><a href="#">数码家电</a><span class="nav2span"></span></li>
            <li class="nav2"><a href="#">严选全球</a><span class="nav2span"></span></li>
            <li><a href="#">为你严选</a></li>
            <li><a href="#">众筹</a></li>
        </ul>


    </nav>

    <!-- 隔断标题 -->
    <ul class="gd1 banxin">
        <li><a href="#">首页></a></li>
        <li><a href="#">美食酒水></a></li>
        <li><a href="#">方便食品></a></li>
        <li><a href="#">0脂荞麦面</a></li>
    </ul>
    <!-- 商品信息 -->
    <div class="message banxin">

        <div class="box" id="box" style="margin: 50px 0;">
            <div class="small" id="small">
                <img src="./img/small.jpg" width="350" alt="" />
                <div class="mask" id="mask"></div>
            </div>
            <div class="big" id="big" style="z-index: 5;">
                <img src="./img/big.jpg" width="800" alt="" id="img" />
            </div>

            <div style="display: flex;line-height: 50px;margin-top: 20px;">
            </div>


        </div>

        <ul style="display: flex;position: absolute;top: 630px; " class="messageul2" id="fDJ">
            <li><img src="./img/xiangqingmin.webp" alt=""></li>
            <li><img src="./img/xiangqingmin.webp" alt=""></li>
            <li><img src="./img/xiangqingmin.webp" alt=""></li>
            <li><img src="./img/xiangqingmin.webp" alt=""></li>
            <li><img src="./img/xiangqingmin.webp" alt=""></li>
        </ul>


        <div style="margin-left: 50px;">
            <h3 id="messageh3">0脂荞麦皮6袋</h3>
            <div>
                <p style="color: rgb(112, 117, 121);">添加粗粮高饱腹,减脂党的理想主食</p>
                <span><a href="#none" style="color: black;">查看评价></a></span>
            </div>
            <div style="background:#f5f3ef ; padding: 20px 30px 20px 20px;width: 600px;">


                <p>价格<span style="font-weight: 600;font-size: 30px;color: red;" id="messagemany">￥16.9</span><del style="color: rgb(112, 117, 121);">￥25.9</del></p>



                <p>购物返 <span style="font-weight: 600;">最高返<span style="color: red;">1积分</span></span>
                </p>

                <p>
                    限制<span>特价商品不可与优惠劵叠加使用</span>
                </p>

                <p>邮费 <span style="color: black;">免邮,合作仓直发</span></p>


                <div class="dropdown">
                    <span style="margin-right: 10px;margin-left: 0;">配送</span>至<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                          北京市昌平区沙河地区
                          <span class="caret"></span>
                        </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li><a href="#none">北京市</a></li>
                        <li><a href="#none">昌平区</a></li>
                        <li><a href="#none">沙河地区</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#none">北京科技职业学院</a></li>
                    </ul>
                    现货
                </div>




                <div style="display: flex;height: 50px;line-height: 50px;border-top: 1px solid #cecccc;margin-top: 10px;">
                    服务
                    <ul style="display: flex; " class="messageul">
                        <li>严选自营</li>
                        <li>免费配送到家</li>
                        <li>不支持无忧退还</li>
                        <li>不可用券</li>
                        <li>国内部分地区不可配送</li>
                    </ul>


                </div>





            </div>

            <div style="display: flex;line-height: 50px;margin-top: 20px;">
                规格
                <ul style="display: flex; " class="messageul2" id="messageul">
                    <li "><img src="./img/xiangqingmin.webp " alt=" "></li>
                    <li><img src="./img/xiangqingmin.webp " alt=" "></li>
                    <li><img src="./img/xiangqingmin.webp " alt=" "></li>
                    <li><img src="./img/xiangqingmin.webp " alt=" "></li>
                    <li><img src="./img/xiangqingmin.webp " alt=" "></li>
                </ul>


            </div>

            <div>
                数量
                <span style="border: 1px solid #cecccc;display: inline-block;border-radius: 3px; ">


                    <button style="width: 26px;height: 26px; border: none; " class="jian ">-</button>
                
                <input type="text " value="1 " style="height: 26px;width: 50px;border: none;outline: none;text-align: center; " class="mathinput ">


                <button style="width: 26px;height: 26px; border: none; " class="jia ">+</button>



                </span>


            </div>

            <div style=" display: flex;align-items: center;margin-top: 10px; ">
                <button class="btnbuy" style="height: 40px; "> 立即购买
                </button>

                <button class="btnbuy" style="height: 40px;margin-left: 10px; " id="jiabtn"> 加入购物车
                </button>
                <span style="border:1px solid #cecccc;display: inline-block;height: 40px;line-height: 40px;width: 60px;text-align: center;color: #aaa7a7; " class="shoucang ">
                    
                    
                    
                    <span class="glyphicon glyphicon-star-empty ">

                    </span>

                <a href="#none ">收藏</a>

                </span>


                <span style="border:1px solid #cecccc;display: inline-block;height: 40px;line-height: 40px;width: 130px;text-align: center;color: #aaa7a7; " class="xiazai ">
                    <span class=" glyphicon glyphicon-download " style="font-size: 15px; ">
                </span>


                <a href="#none ">下载严选APP</a>

                </span>

            </div>



        </div>








    </div>

    <!-- 隔断 -->
    <h5 style="background-color: #ece8e8;height: 50px;line-height: 50px;font-size: 20px;padding-left: 20px;margin-top: 30px; " class="banxin ">你可能还喜欢</h5>
    <!-- 你可能还喜欢轮播图 -->


    <div class="every" style="height: 400px;background: white; ">

        <div class="banxin every1" style="height: 400px; overflow: hidden;border: 2px solid #e9e6e6;border-top: 0; ">


            <div class="every2" style="left: 0; ">

                <div class="new1child">
                    <p>
                        <img src="./img/index0.webp " alt=" ">

                    </p>
                    <p>日本冰块球制冰模具</p>
                    <p class="new1red ">￥29.8</p>

                </div>


                <div class="new1child">
                    <p>
                        <img src="./img/index0.webp " alt=" ">

                    </p>
                    <p>日本冰块球制冰模具</p>
                    <p class="new1red">￥29.8</p>

                </div>
                <div class="new1child">
                    <p>
                        <img src="./img/index0.webp " alt=" ">

                    </p>
                    <p>日本冰块球制冰模具</p>
                    <p class="new1red">￥29.8</p>

                </div>
                <div class="new1child">
                    <p>
                        <img src="./img/index0.webp " alt=" ">

                    </p>
                    <p>日本冰块球制冰模具</p>
                    <p class="new1red">￥29.8</p>

                </div>
                <div class="new1child">
                    <p>
                        <img src="./img/index0.webp " alt=" ">
                    </p>
                    <p>日本冰块球制冰模具</p>
                    <p class="new1red">￥29.8</p>

                </div>
                <div class="new1child">
                    <p>
                        <img src="./img/index0.webp " alt=" ">
                    </p>
                    <p>日本冰块球制冰模具</p>
                    <p class="new1red">￥29.8</p>

                </div>
                <div class="new1child">
                    <p>
                        <img src="./img/index0.webp " alt=" ">
                    </p>
                    <p>日本冰块球制冰模具</p>
                    <p class="new1red">￥29.8</p>

                </div>
                <div class="new1child">
                    <p>
                        <img src="./img/index0.webp " alt=" ">
                    </p>
                    <p>日本冰块球制冰模具</p>
                    <p class="new1red">￥29.8</p>

                </div>
                <div class="new1child">
                    <p>
                        <img src="./img/index0.webp " alt=" ">
                    </p>
                    <p>日本冰块球制冰模具</p>
                    <p class="new1red">￥29.8</p>

                </div>
                <div class="new1child">
                    <p>
                        <img src="./img/index0.webp " alt=" ">
                    </p>
                    <p>日本冰块球制冰模具</p>
                    <p class="new1red">￥29.8</p>

                </div>

                <div class="new1child">
                    <p>
                        <img src="./img/index0.webp " alt=" ">
                    </p>
                    <p>日本冰块球制冰模具</p>
                    <p class="new1red">￥29.8</p>

                </div>
                <div class="new1child">
                    <p>
                        <img src="./img/index0.webp " alt=" ">
                    </p>
                    <p>日本冰块球制冰模具</p>
                    <p class="new1red">￥29.8</p>

                </div>
                <div class="new1child">
                    <p>
                        <img src="./img/index0.webp " alt=" ">
                    </p>
                    <p>日本冰块球制冰模具</p>
                    <p class="new1red">￥29.8</p>

                </div>

                <div class="new1child">
                    <p>
                        <img src="./img/index0.webp " alt=" ">
                    </p>
                    <p>日本冰块球制冰模具</p>
                    <p class="new1red">￥29.8</p>

                </div>
                <div class="new1child">
                    <p>
                        <img src="./img/index0.webp " alt=" ">
                    </p>
                    <p>日本冰块球制冰模具</p>
                    <p class="new1red">￥29.8</p>

                </div>
                <div class="new1child">
                    <p>
                        <img src="./img/index0.webp " alt=" ">
                    </p>
                    <p>日本冰块球制冰模具</p>
                    <p class="new1red">￥29.8</p>

                </div>

            </div>

            <button class="btnbtn btnleft " style="top: 150px; "><</button>
            <button class="btnbtn btnright " style="top: 150px; ">></button>

        </div>



    </div>





    <!-- 详情评价 -->
    <div class="banxin xiangqing " style="margin-top: 50px; ">
        <span>详情</span>
        <span>评价</span>
        <span>常见问题</span>
    </div>
    <div class="banxin pinglun ">
        <div class="pinglun1 ">

            <h1> 这里面是商品详情</h1>


        </div>

        <div class="pinglun2 ">
            <h1> 这里面是评价</h1>

        </div>


        <div class="pinglun3 ">
            <h1> 这里面是常见问题</h1>

        </div>

    </div>


























    <!-- 服务下载 -->
    <div class="serve ">
        <div class="banxin serve1 ">
            <div class="serve1-1 ">
                <h3>客户服务</h3>
                <div>
                    <p>
                        <span>&#128515</span>
                        <a href="# ">在线客服</a>
                    </p>
                    <p>
                        <span>&#128516</span>
                        <a href="# ">用户反馈</a>
                    </p>

                </div>
            </div>


            <div class="serve1-2 ">
                <h3>何为网易严选</h3>
                <p>网易严选是深受新中产喜爱的生活方式品牌,为消费者 提供-站式、全品类全方位的美好生活解决方案。我 们通过简约.实用、舒适的美学设计,不断带来高品质 灵感好物，陪伴3000万新中产用户「活出自己喜欢的样 孔」,共同倡导多元化的生活价值主张一 每个人都可 以把生活的选择权交还给自2.
                </p>
                <div>
                    关注我们:<span>&#128512 &#128513 &#128514</span>
                </div>
            </div>


            <div class="serve1-3 ">
                <h3>扫码下载严选APP</h3>
                <img src="./img/二维码2.png " alt=" ">
                <p>下载领大额新人红包</p>

            </div>



        </div>
    </div>

    <!-- 底部 -->
    <footer>
        <div class="foot1 banxin ">
            <div class="foot1-1 ">
                <div>
                    <span>1</span>
                    <p>网易自营电商</p>
                </div>
                <div>
                    <span>1</span>
                    <p>30天无忧退换货</p>
                </div>
                <div>
                    <span>1</span>
                    <p>满99元免邮费</p>
                </div>
                <div>
                    <span>1</span>
                    <p>品质保证</p>
                </div>
            </div>


            <ul>
                <li>
                    <a href="# ">关于我们</a>
                </li>
                <li>
                    <a href="# ">关于我们</a>
                </li>
                <li>
                    <a href="# ">关于我们</a>
                </li>
                <li>
                    <a href="# ">关于我们</a>
                </li>
                <li>
                    <a href="# ">关于我们</a>
                </li>
                <li>
                    <a href="# ">关于我们</a>
                </li>
                <li>
                    <a href="# ">关于我们</a>
                </li>
                <li>
                    <a href="# ">关于我们</a>
                </li>
                <li>
                    <a href="# ">关于我们</a>
                </li>
                <li>
                    <a href="# ">关于我们</a>
                </li>
            </ul>


            <p>食品经营许可证: JY13301080111719 出版物经营许可证: 新出发滨字第0132号妙得ICP证号: ICP 证浙B2-20160106浙杭食药监械经营备20171029号 营业执照 网易公司版权所有 ◎1997-2021
            </p>
            <p>无线电发射设备销售备案: 42202011096855 (浙杭) 网械企备字[2019]第00119号(粤) 网械平台备字(2019) 第00004号(粤) -非经营性 2016-0023进]冷链食品管理承诺书
            </p>
            <p>食品经营许可证: JY14207050007694 浙江省网络食品销售第三方平台提供者备案:浙网食A33010009单用途商业预付 卡备案证: 330100AAC0024
            </p>
            <p>出版物网络交易平台服务经营备室:新出发浙省字20210号
            </p>
        </div>



    </footer>

    <!-- 导航跟随 -->
    <nav id="fixed">
        <ul class="banxin " style="height: 100%; ">
            <li><a href="# ">首页</a></li>
            <li class="nav2 nav3 "><a href="# " id="jujia ">居家生活</a><span class="nav2span nav2span1 "></span></li>
            <li class="nav2 nav3 "><a href="# ">服饰鞋包</a><span class="nav2span nav2span1 "></span></li>
            <li class="nav2 nav3 "><a href="# ">美食酒水</a><span class="nav2span nav2span1 "></span></li>
            <li class="nav2 nav3 "><a href="# ">个护清洁</a><span class="nav2span nav2span1 "></span></li>
            <li class="nav2 nav3 "><a href="# ">母婴亲子</a><span class="nav2span nav2span1 "></span></li>
            <li class="nav2 nav3 "><a href="# ">运动旅行</a><span class="nav2span nav2span1 "></span></li>
            <li class="nav2 nav3 "><a href="# ">数码家电</a><span class="nav2span nav2span1 "></span></li>
            <li class="nav2 nav3 "><a href="# ">严选全球</a><span class="nav2span nav2span1 "></span></li>
            <li><a href="# ">为你严选</a></li>
            <li><a href="# ">众筹</a></li>



            <li class="glyphicon-shopping glyphicon glyphicon-shopping-cart"></li>
            <div style="width: 300px;height: 300px;background: white;position: absolute;right: 30px;top: 40px; box-shadow: 0px 0px 5px orange;display: flex;padding: 15px;display: none;overflow: auto; " id="buyspan">


               <!-- <div style="display: flex;height: 50px; ">

        <p><img src="./img/xiangqing3.webp " alt=" " style="width: 50px; ">
        </p>
        <p style="display: flex;flex-direction: column;font-size: 10px;margin-left: 10px;justify-content: center;margin-top: 10px; ">
            <span class="buy1 ">女士中强度运动文胸</span>
            <span style="color: #aaa7a7;margin-top: 5px; " >规格<span class="buy2 "></span>X<span>5</span>
            </span>
        </p>
    <p style="margin-left: 10px;color: red;margin-top: 10px; " >￥<span class="buy3 "></span></p>
    <span class="glyphicon glyphicon-remove " style="color: #aaa7a7;margin-left: 10px;margin-top: 10px; "></span>
     </div> -->
            
            </div>
        </ul>
      
    </nav>


    <script src="./js/axios.js "></script>
    <script src="./js/details.js "></script>
    <script src="./js/details2.js "></script>

</body>

</html>